<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .div {
            width: 780px;
            height: 450px;
            margin: 0 auto;
            background-color: rgba(144, 144, 144, 0.329);
        }

        .div-img img {
            width: 100%;
            height: 370px;
            display: block;
        }

        .ceten {
            position: relative;
            width: 100%;
            height: 80px;
            /* background-color: aqua; */
        }

        .ceten p {

            font-size: 19px;
            font-family: '楷体';
            text-align: center;
            padding: 12px 0;
        }

        .ceten .left {
            position: absolute;
            top: 10px;
            left: 0;
            width: 40px;
            height: 60px;
            background-color: rgba(32, 31, 31, 0.123);
        }

        .ceten .right {
            position: absolute;
            top: 10px;
            right: 0;
            width: 40px;
            height: 60px;
            background-color: rgba(32, 31, 31, 0.123);
        }

        .ceten .left::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-top: 1px solid black;
            border-right: 1px solid black;
            transform: rotate(45deg);
            position: absolute;
            top: 25px;
            left: 10px;
        }

        .ceten .right::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-top: 1px solid black;
            border-left: 1px solid black;
            transform: rotate(-45deg);
            position: absolute;
            top: 25px;
            right: 10px;

        }

        .ceten ul {
            width: 130px;
            height: 20px;
            margin: 5px auto;
            /* transform: translate(-50%); */
            background-color: rgba(154, 150, 150, 0.237);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 5%;
        }

        .ceten ul li {
            width: 10px;
            height: 10px;
            border: 1px solid rgba(254, 252, 252, 0.312);

        }

        .lis {
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="div-img">
            <img src="/pink/js_/高级js/画江湖/姬如雪.png" alt="" title="">
        </div>
        <div class="ceten">
            <p>画江湖之不良人</p>
            <ul>
                <li class="lis"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

    <script>
        const datearr = [
            { ulr: '/pink/js_/高级js/画江湖/姬如雪.png', title: '画江湖之不良人-姬如雪', alt: '姬如雪' },
            { ulr: '/pink/js_/高级js/画江湖/幻音阁.png', title: '画江湖之不良人-九天圣姬', alt: '九天圣姬' },
            { ulr: '/pink/js_/高级js/画江湖/旱魃.png', title: '画江湖之不良人-四大尸祖-旱魃', alt: '四大尸祖-旱魃' },
            { ulr: '/pink/js_/高级js/画江湖/阿姐.png', title: '画江湖之不良人-四大尸祖-阿姐', alt: '四大尸祖-阿姐' },
            { ulr: '/pink/js_/高级js/画江湖/骆小北.png', title: '画江湖之不良人-骆小北', alt: '骆小北' },
            { ulr: '/pink/js_/高级js/画江湖/黑白无常.png', title: '画江湖之不良人-黑白无常', alt: '黑白无常' },
        ]

       
        let img = document.querySelector('.div-img img')
        let p = document.querySelector('.ceten p')
        let left = document.querySelector('.left')
        let right = document.querySelector('.right')
        let div =document.querySelector('.div')

         let index = 0;
        left.addEventListener('click', function () {
            index >= datearr.length ? index = 0 : index++
            setan()
        })
        right.addEventListener('click', function () {
            index < 0 ? index = datearr.length - 1 : index--
            setan()
        })


       let lp=setInterval(function () {
             left.click()
        }, 1000)
    
        div.addEventListener('mouseover',function(){
            clearInterval(lp)
        })
        div.addEventListener('mouseout',function(){
            clearInterval(lp)
            lp=setInterval(function () {
             left.click()
        }, 1000)
        })


        function setan() {
            img.src = datearr[index].ulr
            p.innerHTML = datearr[index].title
            document.querySelector(`ul .lis `).classList.remove('lis')
            document.querySelector(`ul li:nth-child(${index + 1}) `).classList.add('lis')
        }
    </script>
</body>

</html>